<template>
  <h6 style="color: crimson">系统管理--><a href="http://localhost:5173/user">角色管理</a>-->角色修改</h6>
  <el-form ref="queryFormRef" :inline="true" :model="queryForm" class="demo-form-inline">

    <el-form-item label="角色名称" prop="posName">
      <el-input v-model="queryForm.posName" style="width: 240px" placeholder="角色名称" clearable />
    </el-form-item> <br>
    <el-form-item label="角色描述" prop="roleName">
      <el-input v-model="queryForm.roleName" style="width: 240px" placeholder="角色描述" clearable />
    </el-form-item><br>
    <el-form-item label="角色状态" prop="userPhone">
      <el-select v-model="queryForm.roleState" placeholder="角色状态" style="width: 240px" clearable  >
        <el-option :value="0" label="正常"/>
        <el-option :value="1" label="禁用"/>
      </el-select>
    </el-form-item><br>
    <el-form-item label="角色部门" prop="departName">
      <el-select v-model="queryForm.departName" placeholder="角色部门" style="width: 240px" clearable  >
        <el-option
            v-for="item in departOptions.optionData"
            :key="item"
            :label="item"
            :value="item"
        />
      </el-select>
    </el-form-item>
      <br>
    <el-form-item>
      <el-button type="primary" @click="updateSubmit">保存</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import {ref,reactive,onMounted,getCurrentInstance} from "vue";
import axios from "@/plugins/axios.js";
import {ElMessage} from "element-plus";
import router from "@/router/index.js";
import {sysUserStore} from "@/stores/sysUserModel.js";
import {roleStore} from "@/stores/RoleModel.js";
const sysRoleModel = roleStore();
const input = ref('')

const updateSubmit = () => {
  console.log(sysRoleModel.roleId)
  axios.postJson('/role/update',queryForm).then(res=>{
    console.log(res)
    if(res.code == 200){
      ElMessage.success('修改成功')
      router.push('/role')
    }
  })
}
const queryForm=reactive({
})
const tableList =reactive({tableData:[],total:10})
const departOptions  =  reactive({optionData:[]})
const roleStateOptions=  reactive({optionData:[]})
const posOptions=  reactive({optionData:[]})
const roleOptions=  reactive({optionData:[]})
const userGenderOptions=  reactive({optionData:[]})
onMounted(()=>{
  queryForm.roleId = sysRoleModel.roleId
  queryForm.departName=sysRoleModel.departName
  queryForm.roleState=sysRoleModel.roleState
  queryForm.roleName=sysRoleModel.roleName
  queryForm.posName= sysRoleModel.posName
  axios.get("role/query").then(res=>{
    if(res.code===200){
      tableList.tableData=res.data
    }
  })
  axios.get("/role/paramList").then(res=>{
    if(res.code===200){
      console.log(res.data)
      departOptions.optionData=res.data.departName
      roleStateOptions.optionData=res.data.roleState
      posOptions.optionData=res.data.posName
      roleOptions.optionData=res.data.roleName
    }
  })
  axios.get("/role/getTatol").then( res=>{
    tableList.total=res.data
  })})

</script>

<style >

</style>